<template>
    <el-col :span="Number(colspan)">
        <el-form-item
            :prop="name"
            :label-width="labelWidth + 'px'"
            :label="label"
            :title="label"
            v-show="property.p.indexOf('H') === -1">
            <el-input @keyup.native.enter="onEnter" :disabled="property.p.indexOf('D') >= 0" :name="name" v-model="property.value"
                      :type="type"
                      :placeholder="placeholder"
                      :maxlength="maxlength"
                      @change="onChange" @blur="onBlur" @focus="onFocus" :data-value="property.value"
                      :data-p="property.p" :value="property.value">
                <i class="el-icon-search el-input__icon"
                   slot="suffix"
                   v-show="property.p.indexOf('D') === -1"
                   @click="onClick">
                </i>
            </el-input>
        </el-form-item>
        <el-dialog class="dialog-content" border title="银行信息查询" :visible.sync="dialogVisible" width="70%">
            <el-form :inline="true" ref="form" :model="form" class="demo-form-inline" style="margin-bottom:20px;">
                <el-form-item colspan="16" label="银行行号">
                    <el-input size="medium" v-model="form.aaf002" placeholder="请输入银行行号"></el-input>
                </el-form-item>
                <el-form-item colspan="16" label="银行行名">
                    <!--<el-select size="medium" v-model="form.aaz065" filterable placeholder="请选择发放银行">-->
                        <!--<el-option v-for="item in bankList" :key="item.key" :label="item.value" :value="item.key"></el-option>-->
                    <!--</el-select>-->
                    <el-input size="medium" v-model="form.bac049" placeholder="请输入银行行名"></el-input>
                </el-form-item>
                <el-button size="medium" type="primary" @click="query">查询</el-button>
                <el-button size="medium" @click="reset">重置</el-button>
            </el-form>
            <el-table class="ep-table" :data="tableData" style="width: 100%" height="220px" highlight-current-row @row-click="tableClick" @row-dblclick="tableDbClick">
                <el-table-column class="ep-table-item" align="center" prop="aaf002" label="银行行号" min-width="80"></el-table-column>
                <el-table-column align="center" prop="bac049" label="银行行名" min-width="80"></el-table-column>
            </el-table>
            <!-- <div style="margin-bottom:10px;">
                <el-pagination
                    @size-change="handleSizeChange" @current-change="handlePageChange"
                    layout="total, sizes, prev, pager, next, jumper" :page-sizes="[20, 40, 60, 80,100]"
                    :current-page="pager.page" :page-size="pager.size" :total="pager.total">
                </el-pagination>
            </div> -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </el-col>
</template>


<script type="es6">

    export default {
        props: {
            colspan: {
                type: String,
                default: '24'
            },
            labelWidth: {
                type: String,
                default: '140'
            },
            label: {
                type: String,
                default: ''
            },
            placeholder: {
                type: String,
                default: ''
            },
            p: {
                type: String,
                default: ''
            },
            codetype: {
                type: String,
                default: ""
            },
            type: String,
            maxlength: Number,
            property: {
                type: Object,
                default: function () {
                    return {
                        value: '',
                        p: ''
                    }
                }
            },
            name: {
                type: String,
                default: ''
            },
            bankName:{
                type: String,
                default: ''
            },
            datas: {
                type: Object,
                default: null
            },
            isChange: {
                type: Boolean,
                default: false
            },
            isClick: {
                type: Boolean,
                default: false
            },
            isBlur: {
                type: Boolean,
                default: false
            },
            isFocus: {
                type: Boolean,
                default: false
            },
            formName:{
                type: String,
                default: 'formData'   
            }
        },
        data() {
            return {
                dialogVisible:false,
                tableData:[],
                bankList:[],
                id:{
                    Random:""
                },
                pager:{
                    page:1,
                    size:20,
                    total:0,
                },
                form:{
                    aaf002:'',
                    bac049:'',
                }
            }
        },
        computed: {
            codeTypes() {
                return this.$store.getters.codeTypes;
            },
            bankKey(){
                if(this.datas && this.datas[this.formName] && this.bankName){
                    return this.datas[this.formName][this.bankName].value
                }else{
                    return ''
                }
            }
        },
        watch: {
            property: {
                handler(value) {
                    this.form.aaf002 = value.value;
                },
                deep: true
            },
            datas: {
                handler(value) {
                    this.datas = value;
                },
                deep: true
            },
            bankKey: {
                handler(value) {
                    this.getBankName(value);
                },
                deep: true
            }
        },
        created() {
        },
        methods: {
            /**
             * 获取总行名称
             */
            getBankName(value){
                if(this.codetype && this.codeTypes){
                    this.codeTypes[this.codetype].map(item=>{
                        if(item.key == value){
                            this.form.bac049 = item.value;
                        }
                    })
                }
            },
            /**
             * 请求列表（回车）
             */
            onEnter() {
                if(this.bankName && this.datas[this.formName][this.bankName].value != ''){
                    this.dialogVisible = !this.dialogVisible;
                }else{
                    this.$message.error('请先选择发放银行');
                }
            },
            /**
             * 点击弹框不请求
             */
            onClick(){
                if(this.bankName && this.datas[this.formName][this.bankName].value != ''){
                    this.dialogVisible = !this.dialogVisible;
                    this.getUserId(1);
                }else{
                    this.$message.error('请先选择发放银行');
                }
            },
            /**
             * 表格点击事件
             */
            tableClick(row){
                this.datas[this.formName].aaf002.value = row.aaf002;
                this.datas[this.formName].bac049.value = row.bac049;
            },
            /**
             * 表格双击事件
             */
            tableDbClick(row){
                this.dialogVisible = false;
                this.datas[this.formName].aaf002.value = row.aaf002;
                this.datas[this.formName].bac049.value = row.bac049;
                this.$store.dispatch('SET_COMMON', this.datas);
            },
            /**
             * 提交id
             */
            submit(){
                this.dialogVisible = false;
                if(this.datas[this.formName].aaf002.value && this.datas[this.formName].bac049.value){
                    this.$store.dispatch('SET_COMMON', this.datas);
                }
            },
            /**
             * 查询
             */
            query(){
                this.getUserId(1);
            },
            /**
             * 表单重置
             */
            reset() {
                this.form = {
                    aaf002:'',
                    bac049:'',
                }
            },
            /**
             * 根据身份证获取id
             */

            getUserId(type){
                this.$api.commonPost('business/d101insib/d01pensioncommon/PensionQueryComm/doBankQueryComm',this.form).then(res => {
                    if (res.status === '0') {
                        this.tableData = res.data;
                    } else if (res.successMessage && res.successMessage.length > 0) {
                        res.successMessage.map(item => {
                            this.$message({
                                type: 'success',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    } else if (res.errorMessage && res.errorMessage.length > 0) {
                        res.errorMessage.map(item => {
                            this.$message({
                                type: 'error',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    } else if (res.warnMessage && res.warnMessage.length > 0) {
                        res.warnMessage.map(item => {
                            this.$message({
                                type: 'warning',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    }
                });
            },
            /**
             * 页面码改变时事件
             */
            handlePageChange(page) {
                this.pager.page = page;
                this.getUserId(1);
                
            },
            /**
             * 每页条数改变事件
             */
            handleSizeChange(size) {
                this.pager.size = size;
                this.getUserId(1);
            },
            /**
             * 点击事件
             */
            onClick1() {
                if (!this.isClick) return;
                this.$emit("isClick", true);
                let obj = {
                    path: this.$route.path + '/doQuery/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 选择事件
             */
            onChange() {
                if (!this.isChange) return;
                let obj = {
                    path: this.$route.path + '/doCheck/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 失去焦点
             */
            onBlur() {
                if (!this.isBlur) return;
                let obj = {
                    path: this.$route.path + '/blur/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 获取焦点
             */
            onFocus() {
                if (!this.isFocus) return;
                let obj = {
                    path: this.$route.path + '/focus/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            }
        }
    }
</script>

<style lang="less" scoped>
    .search-content{
        display: flex;
        justify-content:space-between;
        .search-input {
            display: flex;
            flex: 1;
            margin-right: 30px;
            max-width:500px;
            span {
                flex: 100px;
                margin-right: 5px;
                line-height: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            span:before {
                content: '*';
                color: #f56c6c;
                margin-right: 4px;
            }

            .el-icon-search {
                cursor: pointer;
            }

            .el-icon-search:hover {
                color: #409eff;
            }
        }
    }
    .ep-table{
        .ep-table-item{
            padding:10px;
        }
    }
    .dialog-footer{
        width: calc(100% - 40px);
        /*position: absolute;*/
        bottom: 0;
        right: 0;
       padding: 0 20px 30px 20px;
    }
    .el-table__body tr.current-row>td{
        background-color:#cdebef!important;
    }
    /deep/ .el-dialog{
        /*height:70vh;*/
    }
    /deep/ .el-dialog__footer{
        padding:0px;
    }
    /deep/ .el-table--enable-row-transition .el-table__body td {
        padding: 12px 0!important;
    }
</style>
